<template>
  <div class="cinema">
    <!-- 影院标题 -->
    <div class="title">影院</div>
    <!-- 城市定位及搜索 -->
    <div class="ctiysSearch">
      <div class="city">
        <span @click="gotocity">{{ $route.params.cname || "城市" }}</span>
        <span class="iconfont icon-arrow-down"></span>
      </div>
      <div class="search">
        <span class="iconfont icon-search"></span>
        <span>找影院</span>
      </div>
    </div>
    <!-- 全城、APP订票、最近去过 -->
    <ul class="tab">
      <li>
        <span>全城</span>
        <span class="iconfont icon-arrow-down"></span>
      </li>
      <li>
        <span>APP订票</span>
        <span class="iconfont icon-arrow-down"></span>
      </li>
      <li>
        <span>最近去过</span>
        <span class="iconfont icon-arrow-down"></span>
      </li>
    </ul>
    <!-- 电影院列表 -->
    <div class="wrapper">
      <ul>
        <!-- 单个影院 -->
        <li v-for="(item,index) in cinemasArr" :key="'item' + index">
          <!-- 影院名称及地址 -->
          <div class="cname">
            <span>{{ item.name }}</span>
            <span v-if= item.businessTime>营业时间:{{ item.businessTime }}</span>
            <span>详细地址:{{ item.address }}</span>
          </div>
          <!-- 价钱及距离 -->
          <div class="cmoney">
            <span><span>{{ item.lowPrice | formatLowPrice }}</span>元起</span>
            <span>{{ item.Distance | formatDistance}} km</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import {cinemasList} from "../../api/api"
export default {
  data() {
    return {
      //当前城市的电影院列表
      cinemasArr: []
    }
  },
  async created() {
    // let res = await cinemasList(110100)
    // console.log(res);
    let cinemas = await cinemasList(this.$route.params.cid);
    // 如果直接点底部的影院没有传递对应的城市定位，跳转到城市定位模块
    if (!this.$route.params.cid) {
      this.$router.push("/city");
      return;
    }
    this.cinemasArr = cinemas.data.data.cinemas
    console.log(this.cinemasArr);
  },
  filters: {
    //格式化价钱
    formatLowPrice(num) {
      return parseFloat(num / 100)
    },
    //格式化距离
    formatDistance(val){
      return val.toFixed(2);
    }
  },
  methods: {
    //跳转至城市页面
    gotocity() {
      this.$router.push('/city')
    }
  }
};
</script>

<style lang="scss" scoped>
.cinema {
  margin-top: 1.1rem;
  //影院标题
  .title {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    color: #fff;
    background-color: red;
    font-size: .4rem;
    z-index: 10;
    line-height: 1.1rem;
    text-align: center;
  }
  //城市定位及搜索
  .ctiysSearch {
    display: flex;
    height: .8rem;
    background-color: rgb(237, 239, 243);
    font-size: .3rem;
    .city {
      width: 20%;
      line-height: .8rem;
      text-align: center;
    }
    .search {
      width: 78%;
      background-color: #fff;
      outline: none;
      height: .5rem;
      align-self: center;
      color: grey;
      text-align: center;
    }
  }
  //全城、APP订票、最近去过
  .tab {
    height: .8rem;
    font-size: .28rem;
    text-align: center;
    display: flex;
    width: 100%;
    color: rgb(82, 81, 81);
    border-bottom: 1px solid #ccc;
    li {
      width: 33.2%;
      border-right: 1px solid #ccc;
      line-height: .8rem;
    }
    li:nth-child(3) {
      border-right: none;
    }
  }
  //电影院列表
  .wrapper {
    ul {
      //单个影院
      li {
        height: 2.3rem;
        border-bottom: 1px solid #ccc;
        padding: .3rem;
        display: flex;
        justify-content: space-between;
        font-size: .29rem;
        color: grey;
        //影院名称及地址
        .cname {
          width: 78%;
          // background-color: yellow;
          display: flex;
          flex-direction: column;
          span {
            width: 5.5rem;
            margin-bottom: .2rem;
            //溢出显示省略号
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          span:first-child {
            font-size: .33rem;
            color: #000;
          }
        }
        //价钱及距离
        .cmoney {
          width: 22%;
          // background-color: green;
          display: flex;
          flex-direction: column;
          text-align: right;
          font-size: .27rem;
          span:first-child {
            color: red;
            margin-bottom: .2rem;
            span {
              font-size: .35rem;
            }
          }
        }
      }
    }
  }
}
.iconfont {
  font-size: .28rem;
}
</style>